<script setup>
import tool from "@/utils/tool.js";
import { ref,onMounted } from "vue";
import home from "@/services/home";
import { userStore } from "@/stores/userStore";
import { version } from "less";


const uStore = userStore()
const currentUser = ref({
  username: uStore.state.loginUserInfo?.username,
  role: uStore.state.loginUserInfo?.role[0],
  currentTime: uStore.state.loginUserInfo?.currentTime,
  avatar: uStore.state.loginUserInfo?.avatar
})
const tableData = ref([
  {
    tech: 'springboot',
    version: '2.7.18',
  },
  {
    tech: 'mysql',
    version: '8.2.0',
  },
  {
    tech: 'jdk',
    version: '1.8'
  },
  {
    tech: 'hutool-all',
    version: '5.8.33'
  },
  {
    tech: 'mybatis-plus-boot-starter',
    version: '3.5.2'
  },
  {
    tech: 'sa-token-spring-boot-starter',
    version: '1.39.0'
  },
  {
    tech: 'druid-spring-boot-starter',
    version: '1.2.24'
  },
  {
    tech: 'minio',
    version: '8.5.8'
  },

])

const fullCityData = ref();

const init = async ()=> {
    // const res = await home.getTableData()
    // tableData.value = res

    const res1 = await home.pageFullCity()
    fullCityData.value = res1.list

}
onMounted(()=>{
    // init()
})

</script>
<template>
  <el-row :gutter="20" >
    <el-col :span="10">
      <el-card>
        <div class="login-user">
          <div>
            <el-avatar :size="100" fit="fit" :src="currentUser.avatar" />
          </div>
          <div class="user-name">
            <el-space direction="vertical">
              <el-text size="large">{{currentUser.username }}</el-text>
              <el-text type="info">{{ currentUser.role.roleName}}</el-text>
            </el-space>
          </div>
        </div>
        <template #footer>
          <el-space direction="vertical" alignment="flex-start">
            <el-space>
              <el-text type="info">登录时间：</el-text>
              <el-text>{{currentUser.currentTime}}</el-text>
            </el-space>
            <el-space>
              <el-text type="info">登录地点：</el-text>
              <el-text>广州</el-text>
            </el-space>
          </el-space>
        </template>
      </el-card>

     
      
    </el-col>
    <el-col :span="14">
      <el-card>
        <el-table :data="tableData" >
        <el-table-column prop="tech" label="技术栈"  />
        <el-table-column prop="version" label="版本号"  />
      </el-table>
      </el-card >
    </el-col>
  </el-row>
</template>

<style lang="less" scoped>
.login-user {
  display: flex;
  align-items: center;
  .user-name {
    margin-left: 50px;
  }
}

.home-table{
    margin-top: 20px
}
</style>
